<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册页面</title>
  <link rel="shortcut icon" type="image/x-icon" href="../../image/favion.ico">
  <link rel="stylesheet" href="../../css2/base.css">
  <link rel="stylesheet" href="../../iconfont/iconfont.css">
  <link rel="stylesheet" href="../../css2/login.css">
  <link rel="stylesheet" href="../../css2/register.min.css">
  <script src="../../iconfont/iconfont.js"></script>
  <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
  <style>
    .icon {
      width: 1.5em;
      height: 1.5em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
    </style>
</head>
<body>
  <div class="box">
    <div class="login_box regist_box" style="height: 500px">
        <h3>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-lu"></use>
          </svg>
          &nbsp;Register
        </h3>
          <form class="regist login" id="regist">
            <p>
              <input type="text" name="username" class="username" placeholder="请输入用户名">
            </p>
            <p>
              <input type="text" name="accound" class="accound" placeholder="请输入你的邮箱">
            </p>
            <p>
              <input type="password" name="psw" id='psw' class="psw" placeholder="请输入你的密码">
            </p>
            <p>
              <input type="password" name="psw2" class="psw2" placeholder="再次确认你的密码">
            </p>
            <p>
              <input type="text" id="_code" name="_code" placeholder="请输入验证码" style="width: 140px">
              <input type="button" id="_codebtu" class="code" value="获取验证码"/></p>
            <p>
<%--              <span style="margin-left: -130px;position: absolute;margin-top: 10px"><font color="maroon">您的验证码是：</font></span>--%>
              <span style="margin-left: -130px;position: absolute;margin-top: 10px"><font  id="_codetips" color="maroon" ></font></span>
            </p>
            <p>
              <input class="submit" type="submit" value="立即注册">
              <a class="login register">前往登录</a></button>
            </p>
          </form>
    
    </div>
  </div>
  <script src="../../js2/fairyDustCursor.js"></script>
  <script src="../../lay-ui/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
  <script>
    var code=0;
    // 注册页面
    // 添加验证规则
    jQuery.validator.addMethod('testUsername', function (value) {
      // 方法中必须返回布尔值
      // value 就是你验证这个输入框输入的内容
      let reg = /^[a-zA-Z0-9_-]{4,16}$/;
      if (reg.test(value)) {
        return true
      }
      return false
    }, '用户名4到16位，请输入字母、数字、下划线或减号');

    $("#_codebtu").click(function(){			//登录点击事件生成验证码
      //生成算数验证码
      var one = parseInt(Math.random()*100);
      var two = parseInt(Math.random()*100);
      var three = parseInt(Math.random()*10);
      var four = parseInt(Math.random()*10);
      code = three+four;
      $("#_codetips").html('您的验证码为: '+three+'+'+four+' 的结果');
    });

    function checkcode(a,c){						//验证码校验
      if(c!=null){
        if(a==c){
          console.log("生成："+c+" 输入:"+a);
          // b.html("<font color='green'>验证码正确</font>");
          return true;
        }else{
          // b.html("<font color='red'>请输入正确的验证码</font>");
          return false;
        }
      }else{
        return false;
      }
    }
    //注册失败时清空表单
    function reload1(){
      setTimeout(function (){
        window.location.reload();
      }, 3000);
    }
    //自定义密码格式校验方法
    jQuery.validator.addMethod('testPassword', function (value) {
      let reg = /(?!.*\s)(?!^[\u4e00-\u9fa5]+$)(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{8,16}$/;
      if (reg.test(value)) {
        return true
      }
      return false
    }, '8-16个字符,没有空格,数字、字母、字符至少有两种');

    //自定义验证码校验方法
    jQuery.validator.addMethod('testCode',function (value){
      if(checkcode(value,code)){
        return true
      }
      return false
    },'验证码输入错误');

    $('#regist').validate({
      rules: {
        username: {
          required: true,
          testUsername: true,
        },
        accound: {
          required: true,
          email: true
        },
        psw: {
          required: true,
          testPassword: true,
        },
        psw2: {
          required: true,
          equalTo: "#psw",
        },
        _code:{
          required:true,
          testCode:true,
        }
      },
      messages: {
        username: {
          required: "请输入您的用户名！",
        },
        accound: {
          required: "请输入您的账号！",
          email: "请输入正确的邮箱！"
        },
        psw: {
          required: "请输入您的密码！",
        },
        psw2: {
          required: "请确认您的密码！",
          equalTo: "密码输入不一致！",
        },
        _code:{
          required:"请输入验证码！",
        }
      },
        //注册事件
      submitHandler: function () {
        layui.use(['form', 'jquery'], function () {
          var layer = layui.layer;
          $('.submit').click(function () {
            $.ajax({
              'url': '/web/blogger/register.do',
              'method': 'post',
              'data': {
                userName: $('.username')[0].value,
                profile: $('.accound')[0].value,
                password: $('.psw')[0].value
              },
              // 注册成功弹框
              success: function (e) {
                if (e.code == '0') {
                  layer.msg('注册成功！即将前往登录页', function () {
                    window.location.href = 'loginAndRegist.jsp';
                  });
                } else if(e.code=='2') {
                  layer.msg('注册失败!原因：'+e.msg1);
                  reload1();
                }
                else if(e.code=='3'){
                  layer.msg('注册失败！原因：'+e.msg1);
                  reload1()
                }
                else {
                  layer.msg('注册失败！原因：Exception');
                  reload1();
                }
              },
              error: function (res) {
               layer.msg('请求失败');
               return false;
              },
            })
          })
        })
      }
    })


    // 点击登录跳转到登录页面
    $('.register').click(function () {
      window.location.href = "loginAndRegist.jsp";
    })
  </script>
</body>
</html>